<template>
    <div class="touxiang">
        <img src="../assets/touxiang.png" alt="头像">
        <p>昵称:<span>{{name}}</span></p>

        <div>
          <label for="">
              <span>更改用户名:</span>
              <input type="text" v-model="name" @change="setUser">
          </label>
        </div>
    </div>
    
</template>
<script>
export default {
    name:'Person',
    data(){
        return{
         
        }  
    },
    props:{
       name:String //父组件向子组件传值
    },
    methods:{
        setUser:function(){
            this.$emit('gaibianUser',this.name)//子组件向父组件传值 通过 事件 这里的name指的是props的name可以 此处省略
        }
    }
}
</script>
<style lang="less" scoped>
  .touxiang{
      img{
          width: 200px;
          height: 200px;
      }
      p{
          font-weight: bold;
          span{
              color: red
          }
      }
  }
</style>

